<template>
  <div class="friend-detail-dialogs">
    <!-- 好友详情弹窗 -->
    <el-dialog 
      width="300px" 
      :visible.sync="innerVisible" 
      append-to-body
      @close="handleClose"
    >
      <div class="padding-10">
        <div class="personal">
          <el-image 
            v-if="searchResult.avatar" 
            class="avatar-large" 
            :src="searchResult.avatar"
          ></el-image>
          <div class="base-content">
            <div class="flex-row">
              <el-tooltip
                class="item"
                effect="dark"
                :content="searchResult.nickName"
                placement="bottom"
              >
                <p class="nick-name">{{ searchResult.nickName }}</p>
              </el-tooltip>&nbsp;
              <span
                :class="{
                  man: searchResult.gender === 1,
                  woman: searchResult.gender === 0,
                }"
              >
                <i class="el-icon-s-custom"></i>
              </span>
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="searchResult.username"
              placement="bottom"
            >
              <p class="login-name">
                <span>登入名:</span>
                <span>{{ searchResult.username }}</span>
              </p>
            </el-tooltip>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button v-if="searchResult.isFriend == 0" type="info">正在申请</el-button>
          <el-button
            @click.prevent="innerVisible = false"
            v-else-if="searchResult.isFriend == 1 || searchResult.isFriend == 3"
            type="primary"
          >发消息</el-button>
          <div v-else>
            <el-input
              size="mini"
              v-model="sendMessage.content"
              class="custom-input"
              maxlength="30"
              placeholder="输入留言"
            ></el-input>
            <el-button
              style="margin-top: 10px"
              @click="addFriend(searchResult.userInfoId)"
              type="success"
            >添加为好友</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 好友详情浮动窗口 -->
    <div v-show="leftClickView" class="float-window" :style="{ left: `${x}px`, top: `${y}px` }">
      <div class="details">
        <div class="header-section">
          <img :src="friendMessage.avatar" />
          <div class="base">
            <div class="name-section">
              <p class="username">{{ friendMessage.username }}</p>&nbsp;
              <span
                :class="{
                  man: friendMessage.gender === 1,
                  woman: friendMessage.gender === 0,
                }"
              >
                <i class="el-icon-s-custom"></i>
              </span>
              <p class="pool" @click="poolClick(friendMessage.friendId, $event)">
                <span class="el-icon-more"></span>
              </p>
            </div>
            <p class="text">
              <span>昵称：</span>
              <span>{{ friendMessage.nickName }}</span>
            </p>
            <p class="text">
              <span>登入名：</span>
              <span>{{ friendMessage.username }}</span>
            </p>
            <p v-show="friendMessage.address" class="text">
              <span>地区：</span>
              <span>{{ friendMessage.address }}</span>
            </p>
          </div>
        </div>
        <div class="other">
          <div class="info-list">
            <p class="info-item">
              <span class="label">备注名</span>
              <span class="value">{{ friendMessage.remark }}</span>
            </p>
            <p v-show="friendMessage.label" class="info-item">
              <span class="label">标签</span>
              <span class="value">{{ friendMessage.label }}</span>
            </p>
            <p v-show="friendMessage.description" class="info-item">
              <span class="label">描述</span>
              <span class="value">{{ friendMessage.description }}</span>
            </p>
            <p class="info-item">
              <span class="label">朋友权限</span>
              <span class="value">仅聊天</span>
            </p>
            <p class="info-item">
              <span class="label">来源</span>
              <span class="value">通过账号搜索</span>
            </p>
          </div>
        </div>
        <div class="action-section">
          <el-button type="success" @click="leftClickView = false">发送消息</el-button>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div
      v-show="poolClickView"
      class="pool-float-window"
      :style="{ left: `${px}px`, top: `${py}px` }"
    >
      <div class="poolChick">
        <div class="opear">
          <div class="detail" @click="remarkViewChick">设置备注和标签</div>
          <div class="detail" @click="recommend(friendMessage.friendId)">
            分享
            <span v-if="friendMessage.gender === 1">他</span>
            <span v-else>她</span>的名片
          </div>
          <div class="detail">
            <span v-if="friendMessage.isStar === 0" @click.prevent="setFriendStar(1)">设置星标朋友</span>
            <span v-if="friendMessage.isStar === 1" @click.prevent="setFriendStar(0)">取消星标朋友</span>
          </div>
          <div class="detail" @click="addBlacklist(friendMessage.friendId)">加入黑名单</div>
          <div class="detail" @click="complaints(friendMessage)">投诉</div>
          <div class="detail" @click="delFriend(friendMessage.friendId)">删除联系人</div>
        </div>
      </div>
    </div>

    <!-- 设置备注和标签弹窗 -->
    <el-dialog
      title="设置备注和标签"
      :before-close="handleClose"
      :visible.sync="remarkView"
      width="22%"
      center
    >
      <el-form ref="form" label-position="top" :model="form" label-width="80px">
        <el-form-item>
          <span slot="label">备注名</span>
          <el-input size="small" placeholder="备注名" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">标签</span>
          <el-select
            style="width: 100%"
            v-model="form.label"
            multiple
            filterable
            size="small"
            suffix-icon="el-icon-arrow-right"
            allow-create
            default-first-option
            placeholder="选择标签"
          >
            <el-option
              v-for="(item, index) in labelOptions"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">描述</span>
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancelConfirmUpdate">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from "../../utils/request";

export default {
  name: 'FriendDetailDialog',
  data() {
    return {
      innerVisible: false,
      leftClickView: false,
      poolClickView: false,
      remarkView: false,
      searchResult: {},
      friendMessage: {},
      labelOptions: [],
      form: {
        friendId: "",
        remark: "",
        label: [],
        description: ""
      },
      x: 0,
      y: 0,
      px: 0,
      py: 0,
      sendMessage: {
        content: "你好"
      }
    };
  },
  methods: {
    // 显示好友详情
    showFriendDetail(friendData) {
      this.friendMessage = friendData;
      this.leftClickView = true;
    },
    
    // 显示搜索结果
    showSearchResult(searchData) {
      this.searchResult = searchData;
      this.innerVisible = true;
    },
    
    // 关闭弹窗
    handleClose() {
      this.innerVisible = false;
      this.leftClickView = false;
      this.poolClickView = false;
      this.remarkView = false;
    },
    
    // 右键菜单
    poolClick(friendId, event) {
      if (event.button === 0) {
        this.poolClickView = true;
        this.px = event.clientX;
        this.py = event.clientY;
      }
    },
    
    // 添加好友
    addFriend(friendId) {
      this.sendMessage.receiverId = friendId;
      this.$emit('add-friend', this.sendMessage);
      this.innerVisible = false;
    },
    
    // 设置星标
    setFriendStar(isStar) {
      this.$emit('set-friend-star', {
        friendId: this.friendMessage.friendId,
        isStar: isStar
      });
      this.poolClickView = false;
    },
    
    // 加入黑名单
    addBlacklist(friendId) {
      this.$emit('add-blacklist', friendId);
      this.poolClickView = false;
    },
    
    // 投诉
    complaints(friend) {
      this.$emit('complaints', friend);
      this.poolClickView = false;
    },
    
    // 删除好友
    delFriend(friendId) {
      this.$emit('del-friend', friendId);
      this.poolClickView = false;
    },
    
    // 设置备注和标签
    remarkViewChick() {
      service({
        method: "get",
        url: "users/getUserLabelList"
      }).then(res => {
        this.labelOptions = res.data;
      });
      this.form.friendId = this.friendMessage.friendId;
      this.form.remark = this.friendMessage.remark;
      if (this.friendMessage.label) {
        this.form.label = this.friendMessage.label.split(",");
      } else {
        this.form.label = this.friendMessage.label;
      }
      this.form.description = this.friendMessage.description;
      this.remarkView = true;
    },
    
    // 确认更新
    confirmUpdate() {
      if (this.form.label.length <= 0 || this.form.label === "") {
        this.form.label = [];
      }
      service({
        method: "post",
        url: "users/updateFriendDetail",
        data: this.form
      })
        .then(res => {
          if (res.code === 200) {
            this.remarkView = false;
            this.friendMessage = res.data;
            this.$emit('update-remark', res.data);
          }
        })
        .catch(() => {
          this.remarkView = false;
        });
    },
    
    // 取消更新
    cancelConfirmUpdate() {
      this.remarkView = false;
    },
    
    // 推荐好友
    recommend(friendId) {
      this.$emit('recommend', friendId);
      this.poolClickView = false;
      this.leftClickView = false;
    }
  }
};
</script>

<style scoped>
.padding-10 {
  padding: 10px;
}

.personal {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid #d9d9d9;
}

.avatar-large {
  width: 75px;
  height: 75px;
  border-radius: 10px;
}

.base-content {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  color: black;
  margin-left: 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nick-name {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-name {
  margin-top: 5px;
  color: #999999;
  font-size: 13px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.man {
  color: #409eff;
}

.woman {
  color: #f38098;
}

.float-window {
  position: absolute;
  width: 300px;
  z-index: 10;
  background-color: #fefefe;
  border: 1px solid #ccc;
  color: black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.details {
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.header-section {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
}

.details img {
  width: 75px;
  height: 75px;
  border-radius: 5px;
}

.base {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.name-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 172px;
}

.username {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.pool {
  padding: 3px 2px 3px 2px;
  display: flex;
  border-radius: 4px;
  font-size: 18px;
  color: #5e5e5e;
  margin-left: auto;
  cursor: pointer;
}

.pool:hover {
  background-color: #e1e1e1;
}

.text {
  font-size: 13px;
  color: #999999;
  margin-top: 3px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.other {
  margin-top: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e1e1e1;
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  margin-top: 5px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.label {
  color: #999999;
}

.value {
  color: #333;
}

.action-section {
  display: flex;
  justify-content: center;
  margin-top: 19px;
}

.pool-float-window {
  position: absolute;
  z-index: 11;
  background-color: #fefefe;
  border: 1px solid #ccc;
  color: black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.opear {
  font-size: 13px;
}

.opear .detail {
  padding: 5px 30px 5px 30px;
  text-align: left;
  cursor: pointer;
}

.opear .detail:hover {
  background-color: #dddddd;
}

::v-deep .custom-input .el-input__inner {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #999999;
}

::v-deep .el-dialog__wrapper {
  top: 0;
  right: 0 !important;
}
</style>
